<template>
	<!-- :style="isOpen == true ? style2: style1" -->
	<view class="pos">
		<!-- 编辑队伍的名称 -->
		<view :class="['pos-icon',{icon1: isOpen}]"  @click="sendIsShow">
			<image class="img" src="/static/i_edit.png" mode="widthFix"></image>
		</view>
		<!-- 跳转历史记录 -->
		<view :class="['pos-icon',{icon2: isOpen}]" @click="jumpToHistory">
			<image class="img" src="/static/i_recard.png" mode="widthFix"></image>
		</view>
		
		<!-- 保存比赛信息（可保存在本地或者云端） -->
		<view :class="['pos-icon',{icon4: isOpen}]" @click="saveInfoAll">
			<image class="img" src="/static/i_save.png" mode="widthFix"></image>
		</view>
		
		<!-- 重置比赛信息 -->
		<view :class="['pos-icon',{icon5: isOpen}]"  @click="resetInfo">
			<image class="img" src="/static/i_reset.png" mode="widthFix"></image>
		</view>
		<!-- 展开控件 -->
		<view class="pos-icon icon3" @click="toggleFn">
			<image class="img" src="/static/i_ball.png" mode="widthFix"></image>
		</view>
	</view>
	
	
	
</template>

<script>
	export default {
		name: "my-toggle",
		 emits: ['send-show','reset-info','save-info'],
		data() {
			return {
				isOpen: false,
				style1: `width: 90rpx;height: 90rpx;`,
				style2: `width: 300rpx;height: 300rpx;`,
			};
		},
		methods: {
			toggleFn(){
				this.isOpen = !this.isOpen;
			},
			sendIsShow(){
				// 把布尔值发送给父组件 index.vue
				this.$emit('send-show', {isShow: true});
			},
			jumpToHistory(){
				// 跳转页面
				uni.switchTab({
					url:'/pages/history/history'
				})
			},
			resetInfo(){
				let that = this;
				// 弹窗对话框
				uni.showModal({
					title:"温馨提示",
					content:'确定要重置整场比赛的信息吗?',
					success(res) {
						if(res.confirm){
							that.$emit('reset-info');
						}
					},
					fail() {
						console.log("err")
					}
				})
			},
			saveInfoAll(){
				let that = this;
				// 弹窗对话框
				uni.showModal({
					title:"温馨提示",
					content:'上传比赛信息到云端',
					success(res) {
						if(res.confirm){
							that.$emit('save-info');
						}
					},
					fail() {
						console.log("err")
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.pos {
		position: fixed;
		right: 40rpx;
		bottom: 100rpx;
		z-index: 2;
		background-color: transparent;
		width: 300rpx;
		height: 300rpx;
		// 事件会穿透到下方元素
		pointer-events: none ;
		.pos-icon {
			width: 90rpx;
			height: 90rpx;
			background-color: #06D19F !important;
			border-radius: 50%;
			box-shadow: 0px 2px 2px #000;
			text-align: center;
			line-height: 80rpx;
			position: absolute;
			top: 200rpx;
			left: 200rpx;
			// 过渡属性
			transition: all 500ms;
			// 事件会穿透到下方元素
			pointer-events: auto;
			.img {
				width: 60rpx;
				height: 60rpx;
				vertical-align: middle;
			}
			
		}
		.icon1 {
			top: 0;
			left: 200rpx;
		}

		.icon2 {
			top: 100rpx;
			left: 200rpx;
		}

		.icon4 {
			top: 200rpx;
			left: 0;
		}

		.icon5 {
			top: 200rpx;
			left: 100rpx;
		}
		.icon3 {
			left: 200rpx;
			top: 200rpx;
			z-index: 1000;
		}
	}
</style>